<template>
  <div class="home-page-content">
    <h3>预警时间设置</h3>
    <div class="mt-20">
      <Form ref="formData" :model="formData">
        <Row :gutter="30">
          <Col span="6">
            <FormItem prop="input">
              <Input search placeholder="搜索关键词" v-model="formData.input" />
            </FormItem>
          </Col>
          <Col span="18" class="com-action-btn">
            <Button icon="md-search" type="primary">查询</Button>
            <BtnPlain type="primary" icon="md-refresh" @click="handleReset('formData')">
              <Icon type="md-refresh" />
              <span>重置</span>
            </BtnPlain>
          </Col>
        </Row>
      </Form>
    </div>
    <div class="com-action-table-btn">
      <Button type="primary" @click="modalFlag = true">统一配置</Button>
      <BtnPlain type="primary" @click="goToSMS">短信模板</BtnPlain>
      <BtnPlain type="error" @click="onBatchDel">批量删除</BtnPlain>
    </div>
    <Table :columns="columns" :data="listData" @on-selection-change="onSelectionChange">
      <template slot-scope="{ row }" slot="action">
        <BtnText type="primary" @click="onView(row)">配置</BtnText>
        <BtnText type="error">删除</BtnText>
      </template>
    </Table>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />

    <Modal v-model="modalFlag" width="480px" :title="modalTitle" :mask-closable="false" @on-visible-change="onVisible">
      <Form ref="modalFormData" :model="modalFormData" :rules="rules">
        <div class="modal-item">
          反馈阶段：
          <span>未洽谈</span>
        </div>
        <FormItem prop="smsTemplateId">
          <Select v-model="modalFormData.smsTemplateId" placeholder="请选择反馈时间">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>
        <div class="modal-item">提醒短信内容（选择短信模板或这就填写内容）</div>
        <FormItem prop="smsTemplateId">
          <Select v-model="modalFormData.smsTemplateId" placeholder="请选择短信模板">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>
        <FormItem prop="smsContext">
          <Input type="textarea" :rows="4" v-model="modalFormData.smsContext" placeholder="请输入短信内容"></Input>
        </FormItem>
      </Form>
      <Row slot="footer" type="flex" justify="center">
        <BtnPlain type="primary" @click="modalFlag = false">取消</BtnPlain>
        <Button type="primary" @click="onConfirm">提交</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
export default {
  name: 'warningTimeSet',
  data () {
    return {
      formData: {
        input: '',
        page: 1,
        size: 10,
      },
      columns: [
        {
          type: 'selection',
          width: 60
        },
        {
          title: '反馈阶段',
          key: 'name',
        },
        {
          title: '预警时限',
          key: 'phone',
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center',
        },
      ],
      listData: new Array(10).fill(0).map(it => ({
        id: 1,
        name: '用户名称',
        phone: 18888888888,
        role: '企业管理员',
        test: 188
      })),
      total: 10,
      modalTitle: '统一配置',
      modalFormData: { smsTemplateId: '', smsContext: '' },
      modalFlag: false,
      rules: {
        smsTemplateId: { required: true, message: '模板标题必填' },
        smsContext: { required: true, message: '短信内容必填' },
      },
      ids: []
    }
  },
  methods: {
    pageSizeChange () {
      console.log(row, 'pageSizeChange', this.formData);
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    },
    goToSMS () {
      this.$router.push({ path: '/SMSTemplate' })
    },
    // table勾选事件
    onSelectionChange (selection) {
      this.ids = selection.map(it => it.id)
    },
    onBatchDel () {
      if (!this.ids.length) {
        this.$Message.warning({
          background: true,
          content: '至少勾选一条数据！'
        });
        return
      }
      this.$Modal.confirm({
        title: "温馨提示",
        content: '该数据删除后不可恢复，请确认是否继续？',
        onOk: () => {
          this.$Message.info('Clicked ok');
        },
      })
    },
    // 添加确定
    onConfirm () {
      this.$refs['modalFormData'].validate(async (valid) => {
        if (!valid) return
        const request = { ...this.modalFormData }
        this.modalFlag = false
      })
    },
    // 重置表单状态
    onVisible (val) {
      if (!val) {
        this.$refs['modalFormData'].resetFields();
      }
    },
  }
}
</script>

<style lang='less' scoped>
.mt-20 {
  margin-top: 20px;
}

.modal-item {
  color: #7b8591;
  margin-bottom: 12px;
  > span {
    color: #515a6e;
  }
}
</style>
